{% block sw_sales_channel_detail_domains %}
<mt-card
    :title="$tc('sw-sales-channel.detail.titleDomains')"
    class="sw-sales-channel-detail-domains"
    position-identifier="sw-sales-channel-detail-domains"
>

    {% block sw_sales_channel_detail_domains_meta %}
    <div class="sw-sales-channel-detail-domains__meta">
        {% block sw_sales_channel_detail_domains_headline %}
        <h4 class="sw-sales-channel-detail-domains__headline sw-sales-channel-detail-base__headline">
            <span class="sw-sales-channel-detail-domains__headline-text sw-sales-channel-detail-base__headline-text">
                {{ $tc('sw-sales-channel.detail.titleDomainHeadline') }}
            </span>
        </h4>
        {% endblock %}

        {% block sw_sales_channel_detail_domains_add_button %}
        <mt-button
            size="small"
            :disabled="disableEdit || undefined"
            class="sw-sales-channel-detail__button-domain-add"
            variant="secondary"
            @click="onClickOpenCreateDomainModal"
        >
            {{ $tc('sw-sales-channel.detail.buttonAddDomain') }}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}

    <template #grid>
        {% block sw_sales_channel_detail_domains_grid %}
        <sw-data-grid
            ref="gridDomains"
            :data-source="sortedDomains"
            :columns="getDomainColumns()"
            :show-selection="false"
            :is-loading="isLoadingDomains"
            :show-actions="true"
            :sort-by="sortBy"
            :sort-direction="sortDirection"
            @column-sort="sortColumns"
        >
            {% block sw_sales_channel_detail_domains_columns_template %}

            {% block sw_sales_channel_detail_domains_column_url %}
            <template
                #column-url="{ item }"
            >
                {{ unicodeUriFilter(item.url) }}
            </template>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_column_language_id %}
            <template
                #column-languageId="{ item, isInlineEdit }"
            >
                {{ item.language.name }}
            </template>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_column_currency_id %}
            <template
                #column-currencyId="{ item, isInlineEdit }"
            >
                {{ item.currency.translated.name }}
            </template>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_column_measurement_system_name %}
            <template
                #column-measurementSystemName="{ item, isInlineEdit }"
            >
                {{ getMeasurementName(item.measurementUnits.system) }}
            </template>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_column_snippet_set_id %}
            <template
                #column-snippetSetId="{ item, isInlineEdit }"
            >
                {{ item.snippetSet.name }}
            </template>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_column_actions %}
            <template #actions="{ item }">
                {% block sw_sales_channel_detail_domains_column_action_domain_edit %}
                <sw-context-menu-item
                    :disabled="disableEdit"
                    @click="onClickEditDomain(item)"
                >
                    {{ $tc('sw-sales-channel.detail.buttonEditDomain') }}
                </sw-context-menu-item>
                {% endblock %}

                {% block sw_sales_channel_detail_domains_column_action_domain_delete %}
                <sw-context-menu-item
                    :disabled="disableEdit"
                    variant="danger"
                    @click="onClickDeleteDomain(item)"
                >
                    {{ $tc('sw-sales-channel.detail.buttonDeleteDomain') }}
                </sw-context-menu-item>
                {% endblock %}
            </template>
            {% endblock %}
            {% endblock %}
        </sw-data-grid>
    </template>
    {% endblock %}

    {% block sw_sales_channel_detail_domains_create_modal %}
    <sw-modal
        v-if="currentDomain"
        :title="currentDomainModalTitle"
        @modal-close="onCloseCreateDomainModal"
    >

        {% block sw_sales_channel_detail_domains_create_modal_content %}
        <sw-container
            columns="repeat(auto-fit, minmax(250px, 1fr))"
            gap="0px 30px"
        >
            {% block sw_sales_channel_detail_domains_input_url %}
            <mt-url-field
                v-model="currentDomain.url"
                type="text"
                omit-url-hash
                omit-url-search
                :label="$tc('sw-sales-channel.detail.labelInputUrl')"
                :error="error"
                @update:model-value="onInput"
            />
            {% endblock %}

            {% block sw_sales_channel_detail_domains_input_language %}
            <sw-single-select
                v-model:value="currentDomain.languageId"
                class="sw-sales-channel-detail-domains__domain-language-select"
                :options="salesChannel.languages"
                label-property="name"
                value-property="id"
                required
                :label="$tc('sw-sales-channel.detail.labelInputLanguage')"
                show-clearable-button
                @update:value="onLanguageSelect"
            />
            {% endblock %}
        </sw-container>

        <sw-container
            columns="repeat(auto-fit, minmax(250px, 1fr))"
            gap="0px 30px"
        >
            {% block sw_sales_channel_detail_domains_input_currency %}
            <sw-single-select
                v-model:value="currentDomain.currencyId"
                class="sw-sales-channel-detail-domains__domain-currency-select"
                :label="$tc('sw-sales-channel.detail.labelInputCurrency')"
                required
                show-clearable-button
                :options="salesChannel.currencies"
                label-property="translated.name"
                value-property="id"
                @update:value="onCurrencySelect"
            />
            {% endblock %}

            {% block sw_sales_channel_detail_domains_input_snippet_set %}
            <sw-entity-single-select
                v-model:value="currentDomain.snippetSetId"
                entity="snippet_set"
                :criteria="snippetSetCriteria"
                :label="$tc('sw-sales-channel.detail.labelInputSnippet')"
                required
                show-clearable-button
                @option-select="onOptionSelect"
            />
            {% endblock %}
        </sw-container>

        <sw-sales-channel-measurement
            :sales-channel="currentDomain"
            :label-unit-system="$tc('sw-sales-channel.detail.measurementSystem.labelUnitSystem')"
            :label-length-unit="$tc('sw-sales-channel.detail.measurementSystem.labelLengthUnit')"
            :label-weight-unit="$tc('sw-sales-channel.detail.measurementSystem.labelWeightUnit')"
        />

        {% block sw_sales_channel_detail_domains_hreflang %}
        <sw-radio-field
            v-model:value="currentDomain.hreflangUseOnlyLocale"
            :label="$tc('sw-sales-channel.detail.hreflang.domainSettings.label')"
            identification="hreflang"
            :options="hreflangLocalisationOptions"
        />
        {% endblock %}
        {% endblock %}

        <template #modal-footer>
            {% block sw_sales_channel_detail_domains_create_action_cancel %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onCloseCreateDomainModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_create_action_create %}
            <mt-button
                size="small"
                variant="primary"
                :disabled="disabled"
                @click="onClickAddNewDomain"
            >
                {{ currentDomainModalButtonText }}
            </mt-button>
            {% endblock %}
        </template>
    </sw-modal>
    {% endblock %}

    {% block sw_sales_channel_detail_domains_delete_modal %}
    <sw-modal
        v-if="deleteDomain"
        :title="$tc('sw-sales-channel.detail.deleteDomainModalTitle')"
        variant="small"
        @modal-close="onCloseDeleteDomainModal"
    >

        {% block sw_sales_channel_detail_domains_delete_modal_confirm_text %}
        {{ $tc('sw-sales-channel.detail.textConfirmDeleteDomain', { url: unicodeUriFilter(deleteDomain.url) }, 0) }}
        {% endblock %}

        {% block sw_sales_channel_detail_domains_delete_modal_footer %}
        <template #modal-footer>
            {% block sw_sales_channel_detail_domains_delete_modal_abort %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onCloseDeleteDomainModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_sales_channel_detail_domains_delete_modal_confirm %}
            <mt-button
                size="small"
                variant="critical"
                @click="onConfirmDeleteDomain(deleteDomain)"
            >
                {{ $tc('sw-sales-channel.detail.buttonConfirmDeleteDomain') }}
            </mt-button>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}
</mt-card>
{% endblock %}
